<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            width: 100px;
            height: 100px;
            background: red;
            display: block;
        }
        .box{
            width: 100px;
            height: 100px;
            background: blue;
            display: block;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script>
        // 字符串拼接 
        // ES5写法 ；
        // var myname = "张三";
        // var str = "我的名字是"+myname+"我是"+
        // "中国人";
        // console.log(str);

        // ES6 ：模板字符串  :通过反引号 包裹 ，遇到变量 通过 ${}(插值表达式)来显示
        // {{myname}}  {myname}  {$myname} <%=myname%> 
        // var myname = "张三";
        // var str = `我的名字是"${myname}"我是中国人`;
        // console.log(str);
        // 模板字符串 ： 可以接受简单逻辑 ，三元运算符 

        var myname1 = "张三";
        var myname2 = "李四";
        var judge = false;
        // document.onclick = function () {
        //     judge = !judge;
        //     var str = `我的名字是${judge ? myname1 : myname2}`;
        //     // var str = `我的名字是${if(judge){myname1}else{myname2}}` //错误的
        //     console.log(str);
        // }
            let containerEle = document.querySelector(".container")
            
            document.onclick  = function(){
                judge = !judge;
                var str = `<div class="${judge?'active':'box'}"></div>`;
                containerEle.innerHTML = str;
            }


    </script>
</body>

</html>